import React, { useState } from 'react';
import CountUp from 'react-countup';
import { Card, Button, Col, Row, Statistic, InputNumber, Slider } from 'antd';

const formatter = (value) => <CountUp end={value} separator="," />;

const Finance = () => {
    const [inputValue, setInputValue] = useState(0);
    return (
        <Card>
            <Row gutter={16}>
                <Col span={12}>
                    <Statistic title="发布任务" value={112893} formatter={formatter} />
                </Col>
                <Col span={12}>
                    <Statistic title="提现金额 (元)" value={112893} formatter={formatter} />
                </Col>
            </Row>
            <Row style={{ marginTop: 24, color: 'rgba(0, 0, 0, 0.45)' }}>
                <Col span={12}>
                    <div>
                        提现手续费
                    </div>
                </Col>
                <Col span={12}>
                    <div style={{ paddingLeft: 8 }}>
                        佣金比例
                    </div>
                </Col>
            </Row>

            <Row gutter={16}>
                <Col span={4}>
                    <Slider value={inputValue} onChange={setInputValue} tooltip={{ formatter: (value) => `${value}%` }} />
                </Col>
                <Col span={2}>
                    <InputNumber
                        min={1}
                        max={20}
                        style={{ margin: '0 16px' }}
                        value={inputValue}
                        onChange={setInputValue}
                        addonAfter="%"
                    />
                </Col>
                <Col span={5}>
                    <Button type="primary">更改</Button>
                </Col>

                <Col offset={1} span={4}>
                    <Slider value={inputValue} onChange={setInputValue} tooltip={{ formatter: (value) => `${value}%` }} />
                </Col>
                <Col span={2}>
                    <InputNumber
                        min={1}
                        max={20}
                        style={{ margin: '0 16px' }}
                        value={inputValue}
                        onChange={setInputValue}
                        addonAfter="%"
                    />
                </Col>
                <Col span={5}>
                    <Button type="primary">更改</Button>
                </Col>
            </Row>
        </Card>
    )
};
export default Finance;
